<!--
	这里是用户管理 -- 教务管理员列表界面
-->
<template>
	<div class="educational-admin-box">
		<!-- 顶部按钮 start -->
		<div class="top-box">
			<el-button type="primary"
					   @click="dialogFormVisible=true;
					   thisEditEducationalAdmin.title='新增教务管理员'">新增</el-button>
			<div width="120px"><el-input clearable v-model="search" placeholder="搜索名字" /></div>
		</div>
		<!-- 顶部按钮 end -->
		<!-- 数据表格 start -->
		<el-table
			ref="multipleTable"
			:data="tableData.filter((data) =>!search || data.name.toLowerCase().includes(search.toLowerCase()))"
			style="width: 100%"
			:border="true"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" />
			<!-- 排序加列上加 sortable -->
			<el-table-column property="account" label="账号" sortable />
			<el-table-column property="name" label="姓名" />
			<el-table-column property="email" label="邮箱" />
			<el-table-column property="phone" label="电话" />
			<el-table-column property="degree" label="职称" />
			<el-table-column property="departmentId" label="所属学院" >
				<template #default="scope">
					{{ getDepartmentNameById(scope.row.departmentId) }}
				</template>
			</el-table-column>
			<!-- 0-在职 -->
			<el-table-column property="state" label="状态">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.state==0">在职</el-tag>
					<el-tag type="danger" v-else>离职</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="160px">
				<template #default="scope">
					<el-button size="mini" type="primary"
							   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger"
						@click="handleDelete(scope.$index, scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 数据表格 end -->
		<!-- 底部按钮 start -->
		<div style="margin-top: 20px">
			批量操作
			<el-button type="primary" @click="toggleSelection([tableData[1], tableData[2]])">修改</el-button>
			<el-button type="danger" @click="toggleSelection()">禁用</el-button>
			<el-button type="warning" @click="">重置密码</el-button>
		</div>
		<!-- 底部按钮 end -->
	</div>

	<!-- 修改 新增的对话框 start -->
	<el-dialog v-model="dialogFormVisible" :title="thisEditEducationalAdmin.title">
		<el-form :model="thisEditEducationalAdmin">
			<el-form-item label="账号">
				<el-input v-model="thisEditEducationalAdmin.account"></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="thisEditEducationalAdmin.name"></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="thisEditEducationalAdmin.email"></el-input>
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="thisEditEducationalAdmin.phone"></el-input>
			</el-form-item>
			<el-form-item label="职称">
				<el-input v-model="thisEditEducationalAdmin.degree"></el-input>
			</el-form-item>
			<el-form-item label="学院">
				<el-select v-model="thisEditEducationalAdmin.departmentId" placeholder="选择学院">
					<el-option v-for="item in departmentList" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="thisEditEducationalAdmin.state" placeholder="选择状态">
					<el-option label="在职" :value="0"></el-option>
					<el-option label="离职" :value="1"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="closeDialog">取消</el-button>
			<el-button type="primary" @click="addOrChangeEducationalAdmin">确定</el-button>
		  </span>
		</template>
	</el-dialog>
	<!-- 修改 新增的对话框 end -->

</template>

<script>
import ipconfig from "@/utils/ipconfig";
import axios from "@/plugins/axios"
import { ElMessage,ElMessageBox } from 'element-plus'
import CopyUtils from "@/utils/CopyUtils";

export default {
	name: "EducationalAdminList",
	data(){
		return {
			/**
			 * 教务管理员数据
			 */
			tableData: [],
			/*
			* 控制对话框显示
			* */
			dialogFormVisible:false,
			/*
			* 当前编辑的对象
			* */
			thisEditEducationalAdmin:{},
			/*
			* 学院列表
			* */
			departmentList:[],
			/*
			* 搜索的内容
			* */
			search:"",
			/*
			* 保存多选数据
			* */
			multipleSelection: [],
		}
	},
	methods:{
		/**
		 * 编辑事件，赋值，打开对话框
		 * @param index
		 * @param value 在数据列表中，这一行的数据
		 */
		handleEdit(index, value){
			// 这里用深拷贝 这样赋值才不会修改原来的
			this.thisEditEducationalAdmin=CopyUtils.deepCopy(value);
			// 把index值赋值到属性上，后面修改的时候用得到
			this.thisEditEducationalAdmin.index=index;
			// 标题也set进去
			this.thisEditEducationalAdmin.title="修改信息";
			this.dialogFormVisible=true;
		},
		/**
		 * 通过学院id获取学院名字
		 * @param id
		 * @returns {*}
		 */
		getDepartmentNameById(id){
			// 两个数据的加载导致了这个问题，先判断有没得数据
			if (id&&this.departmentList.length>0){
				let department=this.departmentList.filter(item =>{return item.id==id})[0];
				return department.name;
			}
		},
		/**
		 * 确定修改教务管理员信息<br/>
		 *  确定新增教务管理员
		 */
		addOrChangeEducationalAdmin(){
			axios.post(ipconfig.address+"/admin/addOrUpdateEducationalAdmin",{
				...this.thisEditEducationalAdmin
			}).then((response)=>{
				if(response.data.code==200){
					location.reload();
				}else{
					ElMessage.warning("修改失败，请重试！");
				}
				this.closeDialog();
			}).catch((error)=>{
				console.log(error);
			});
		},
		/**
		 * 关闭对话框
		 */
		closeDialog(){
			// 1.清空当前编辑的对象数据
			this.thisEditEducationalAdmin={};
			// 2.关闭显示
			this.dialogFormVisible=false;
		},
		/***
		 * 监听多选的事件
		 * @param value 这里的value是数据不是index
		 */
		handleSelectionChange(value) {
			this.multipleSelection = value
		},


	},
	beforeCreate() {
		// 在创建之前获取数据
		// 这里获取教务管理员列表
		axios.get(ipconfig.address+"/admin/userList/2").then((response)=>{
			if(response.data.code==200){
				this.tableData=response.data.data;
			}else{
				ElMessage(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
		// 这里获取学院列表
		axios.get(ipconfig.address+"/common/departmentList").then((response)=>{
			if(response.data.code==200){
				this.departmentList=response.data.data;
			}
		}).catch((error)=>{
			console.log(error);
		});

	}

}
</script>

<style lang="scss" scoped>
.educational-admin-box{
	width: 100%;
	height: 100%;

	.top-box{
		margin-top: 20px;margin-bottom: 20px;
		display: flex;

		div{
			margin-left: 10px;
		}
	}
}
</style>